<template>
  <div style="height:100%">
    <div class="audio">
      <!--隐藏audio标签-->
      <audio autoplay="autoplay" loop="loop" id="music" ref="music">
            <source src="../assets/music.mp3">
          </audio>   </div>
    <img @click="isplay = !isplay" src="../assets/music.png" alt="icon" :class="isplay ? 'play icon' : 'icon'">
    <swiper :options="swiperOption" class="swiper-box">
      <template v-if="!isEmpty">
            <swiper-slide class="swiper-item">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    踏上征程
                    <p>—— <span>{{ftime(baseInfo[0].startTime)}} —— {{ftime(baseInfo[0].endTime)}}</span> ——</p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div>首次出差</div>
                      <div><span class="fuhao">“ </span>出差于<span class="i"> {{baseInfo[0].address}} </span><span class="fuhao"> ”</span></div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <img src="../assets/pic1.jpg" alt="pic" class="w-100" v-show="show">
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 1.6rem;" v-show="show">
                    <p>第一次出差时的惊喜和意外</p>
                    <p class="s">现在回想起来仍然历历在目</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item" v-if="baseInfo[2].id">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    时间最长
                    <p>—— <span>{{ftime(baseInfo[2].startTime)}} —— {{ftime(baseInfo[2].endTime)}}</span> ——</p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div><span class="i">{{baseInfo[2].num * 24}} </span>小时</div>
                      <div><span class="fuhao">“ </span>出差于<span class="i"> {{ baseInfo[2].address }}</span> <span class="fuhao"> ”</span></div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <img src="../assets/pic2.jpg" alt="pic" class="w-100" v-show="show">
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 1.2rem;" v-show="show">
                    <p class="s">这次差旅，时间拓宽了它的长度</p>
                    <p>而你用认真和坚持</p>
                    <p class="s">延长了它的深度</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item" v-if="baseInfo[3].id">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    行程最多
                    <p>—— <span>{{ftime(baseInfo[3].startTime)}} —— {{ftime(baseInfo[3].endTime)}}</span> ——</p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div>连续出差<span class="i"> {{baseInfo[3].num}} </span>个地点</div>
                      <div><span class="fuhao">“ </span> {{baseInfo[3].address}}<span class="fuhao"> ”</span></div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <img src="../assets/pic3.jpg" alt="pic" class="w-100" v-show="show">
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 1.2rem;" v-show="show">
                    <p>紧锣密鼓的行程下</p>
                    <p class="s">你像个飞人一样和时间赛跑</p>
                    <p class="s">却也收获着满满的成就感</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item" v-if="baseInfo[7].id || baseInfo[8].id || baseInfo[9].id || baseInfo[10].id">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    最艰苦
                    <p><span>高温、寒冷、降雨、降雪</span> ——</p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div>合计<span class="i"> {{toInt(baseInfo[7].num) + toInt(baseInfo[8].num) + toInt(baseInfo[9].num) + toInt(baseInfo[10].num)}} </span>天</div>
                      <!-- <div class="ss"><span class="fuhao">“ </span> 高温、寒冷、降雨、防汛响应、防汛响应、周末、法定节假日<span class="fuhao"> ”</span></div> -->
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <div class="mini_text" v-show="show">
                      <p v-if="baseInfo[7].id"><span>高温 </span> {{ftime(baseInfo[7].startTime)}}～{{ftime(baseInfo[7].endTime)}} {{baseInfo[7].address}}</p>
                      <p v-if="baseInfo[8].id"><span>寒冷 </span> {{ftime(baseInfo[8].startTime)}}～{{ftime(baseInfo[8].endTime)}} {{baseInfo[8].address}}</p>
                      <p v-if="baseInfo[9].id"><span>降雨 </span> {{ftime(baseInfo[9].startTime)}}～{{ftime(baseInfo[9].endTime)}} {{baseInfo[9].address}}</p>
                      <p v-if="baseInfo[10].id"><span>降雪 </span> {{ftime(baseInfo[10].startTime)}}～{{ftime(baseInfo[10].endTime)}} {{baseInfo[10].address}}</p>
                      <p>...</p>
                    </div>
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 1.2rem;" v-show="show">
                    <p class="ss">无论是恶劣天气，法定的休息日</p>
                    <p>还是崎岖的路程</p>
                    <p class="s">都阻挡不了，差途中前行的你</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item" v-if="baseInfo[4].id">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    孤身一人
                    <p><span>全年有{{baseInfo[4].num}}天，你独自出行</span></p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div>共 <span class="i">{{baseInfo[4].endTime}} </span>次<span class="i">{{baseInfo[4].num}} </span>天</div>
                      <div><span class="fuhao">“ 出差于</span> {{baseInfo[4].address}}<span class="fuhao"> ”</span></div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <div class="pos_r"  v-show="show">
                      <img src="../assets/pic4.jpg" alt="pic" class="w-100">
                      <div class="pic_img">
                        <p class="xs">孤独的旅人，常会一个人各个城市穿梭</p>
                        <p class="xs">在繁华的一隅浅酌，是为了等待下一次朝阳</p>
                      </div>
                    </div>
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 1rem;" v-show="show">
                    <p class="ss">这就是我生存的方式，更是一种生活态度</p>
                    <p class="s">奔波的你，带着些许疲惫</p>
                    <p class="s">幸运的是，也满载收获..</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item" v-if="baseInfo[6].id">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    人数最多
                    <p>—— <span>{{ftime(baseInfo[6].startTime)}} —— {{ftime(baseInfo[6].endTime)}}</span> ——</p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div><span class="i">{{baseInfo[6].num}} </span>人</div>
                      <div><span class="fuhao">“ </span>一行人来到 <span class="i">{{baseInfo[6].address}}</span><span class="fuhao"> ”</span></div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <img src="../assets/pic5.jpg" alt="pic" class="w-100" v-show="show">
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 0.8rem;" v-show="show">
                    <p class="ss">与平常有所不同，一群人的差途</p>
                    <p class="ss">唠唠嗑，打打闹，一起工作，一起奔波</p>
                    <p class="s">出差似乎变得比以往有趣</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item" v-if="baseInfo[5].id">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    通勤最长
                    <p v-if="baseInfo[5].startTime">—— <span>出发时间 ：{{baseInfo[5].startTime}}</span> ——</p>
                    <p v-else>—— <span>路途遥远，长路漫漫</span> ——</p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div>经历 <span class="i">{{baseInfo[5].num}} </span>小时</div>
                      <div><span class="fuhao">“ </span>到达目的地 <span class="i">{{baseInfo[5].address}}</span><span class="fuhao"> ”</span></div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <img src="../assets/pic6.jpg" alt="pic" class="w-100" v-show="show">
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 0.8rem;" v-show="show">
                    <p class="ss">从某地到某地，火车汽车自行车</p>
                    <p class="s">跨山川渡湖泊</p>
                    <p class="s">来到最终目的地</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    排行
                    <p><span>水科院有你而精彩</span> ——</p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div>全院排名 <span class="i"> {{personInfo.allOrder}}</span></div>
                      <div>部门排名 <span class="i"> {{personInfo.dmOrder}}</span></div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <div class="map-img" v-if="show">
                      <linemap :lineData="lineData"></linemap>
                    </div>
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 0.8rem;" v-show="show">
                    <p class="s">{{oneline.name}}月份，你非常繁忙</p>
                    <p class="s">一个月出差{{oneline.value}}次</p>
                    <p class="xs">虽然总想着为水科院贡献自己的力量</p>
                    <p class="xs">但也要记得在辛勤忙碌时照顾好自己</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item" v-if="baseInfo[1].id">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    末班车
                    <p>—— <span>{{ftime(baseInfo[1].startTime)}} —— {{ftime(baseInfo[1].endTime)}}</span> ——</p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 1rem;" v-show="show">
                      <div>出差于<span class="i"> {{baseInfo[1].address}}</span></div>
                      <div><span class="fuhao">“ 为2019的差旅路途画上了句点 ”</span></div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <img src="../assets/pic7.jpg" alt="pic" class="w-100" v-show="show">
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 0.8rem;" v-show="show">
                    <p class="ss">大家都说，就越来越没有了年味</p>
                    <p class="s">可是出差在外才发现</p>
                    <p class="s">有家就有年味</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                <transition enter-active-class="animated bounce" appear>
                  <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                </transition>
              </div>
            </swiper-slide>
            <swiper-slide class="swiper-item">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    我的足迹
                    <p><span>这一年，你的出差地点地图分布</span></p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 0.4rem;" v-show="show">
                      <div>回顾2019年</div>
                      <div><span class="fuhao">“ </span> <span v-html="strInfo"></span> <span class="fuhao">”</span>
                      </div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <div class="map-img" v-if="show" style="margin-top: 5rem;">
                      <flymapp @success="strInfo = $event"></flymapp>
                    </div>
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 0.8rem;" v-show="show">
                    <p class="l">地图所及之处</p>
                    <p class="l">都留下你的足迹和身影</p>
                    <p class="s">生活有滋有味，出差无限回味</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                  <transition enter-active-class="animated bounce" appear>
                    <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                  </transition>
                </div>
            </swiper-slide>
            <swiper-slide class="swiper-item">
              <div class="t_l">
                <div class="year">
                  <transition enter-active-class="animated fadeInLeftBig" appear>
                    <p v-show="show">20</p>
                  </transition>
                  <transition enter-active-class="animated fadeIn" appear>
                    <p v-show="show"></p>
                  </transition>
                  <transition enter-active-class="animated fadeInRightBig" appear>
                    <p v-show="show">19</p>
                  </transition>
                </div>
                <transition enter-active-class="animated flipInX" appear>
                  <div class="title" v-show="show">
                    “{{rankArr[personInfo.level - 1]}}”
                    <p><span>祝贺你，大数据分析，获得称号</span></p>
                  </div>
                </transition>
              </div>
              <transition enter-active-class="animated fadeIn" appear>
              <div class="border" v-show="show">
                <div class="border-inner">
                  <transition enter-active-class="animated slideInLeft" appear>
                    <div class="inner-text" style="margin-top: 0.4rem;" v-show="show">
                      <div>全年出差<span class="i"> {{personInfo.totalNum}} </span>天</div>
                      <div><span class="fuhao">“ </span> <span v-html="pInfo"></span> <span class="fuhao">”</span>
                      </div>
                    </div>
                  </transition>
                  <transition enter-active-class="animated flipInX" appear>
                    <div class="map-img" v-if="show" style="margin-top: 5rem;">
                      <flymap @success="pInfo = $event"></flymap>
                    </div>
                  </transition>
                </div>
                <transition enter-active-class="animated slideInRight" appear>
                  <div class="outer-text" style="margin-top: 0.8rem;" v-show="show">
                    <p class="ss">生活有滋有味，出差无限回味</p>
                    <p class="l">2020</p>
                    <p class="xs">希望每一次出差都像一次旅途</p>
                    <p class="xs">工作的同时，也能邂逅美好的生活</p>
                  </div>
                </transition>
              </div>
              </transition>
              <div class="cell up">
                  <transition enter-active-class="animated bounce" appear>
                    <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
                  </transition>
                </div>
            </swiper-slide>
</template>
<template v-else>
  <swiper-slide class="swiper-item">
    <div class="t_l">
      <div class="year">
        <transition enter-active-class="animated fadeInLeftBig" appear>
          <p v-show="show">20</p>
        </transition>
        <transition enter-active-class="animated fadeIn" appear>
          <p v-show="show"></p>
        </transition>
        <transition enter-active-class="animated fadeInRightBig" appear>
          <p v-show="show">19</p>
        </transition>
      </div>
      <transition enter-active-class="animated flipInX" appear>
        <div class="title" v-show="show">
          坚守水科院
          <p><span>2019年，你未出差</span> ——</p>
        </div>
      </transition>
    </div>
    <transition enter-active-class="animated fadeIn" appear>
      <div class="border" v-show="show">
        <div class="border-inner">
          <transition enter-active-class="animated slideInLeft" appear>
            <div class="inner-text" style="margin-top: 1rem;" v-show="show">
              <div>2019</div>
              <div><span class="fuhao">“ 你坚守在办公室 ”</span></div>
            </div>
          </transition>
          <transition enter-active-class="animated flipInX" appear>
            <img src="../assets/pic8.jpg" alt="pic" class="w-100" v-show="show">
          </transition>
        </div>
        <transition enter-active-class="animated slideInRight" appear>
          <div class="outer-text" style="margin-top: 1rem;" v-show="show">
            <p class="l">虽未曾出差</p>
            <p class="s">却以另一种方式</p>
            <p class="ss">默默在水科院工作中奉献着自己的力量</p>
          </div>
        </transition>
      </div>
    </transition>
    <div class="cell up">
      <transition enter-active-class="animated bounce" appear>
        <img src="../assets/up.png" alt="up" class="up-img" v-show="show">
      </transition>
    </div>
  </swiper-slide>
</template>
    <swiper-slide class="swiper-item">
      <div class="t_l">
        <div class="year">
          <transition enter-active-class="animated fadeInLeftBig" appear>
            <p v-show="show">20</p>
          </transition>
          <transition enter-active-class="animated fadeIn" appear>
            <p v-show="show"></p>
          </transition>
          <transition enter-active-class="animated fadeInRightBig" appear>
            <p v-show="show">19</p>
          </transition>
        </div>
        <transition enter-active-class="animated flipInX" appear>
          <div class="title" v-show="show">
            关于大事记
            <p>—— <span>点击右上角分享</span> ——</p>
          </div>
        </transition>
      </div>
      <transition enter-active-class="animated fadeIn" appear>
      <div class="border" v-show="show">
        <div class="border-inner">
          <transition enter-active-class="animated slideInLeft" appear>
            <div class="inner-text" style="margin-top: 1rem;" v-show="show">
              <div>长按图片关注微信公众号</div>
              <div><span class="fuhao">系统开发：“ 鄱水科技 ”</span>
              </div>
            </div>
          </transition>
          <transition enter-active-class="animated flipInX" appear>
              <img src="../assets/code.png" alt="pic" class="w-100" v-show="show">
          </transition>
        </div>
        <transition enter-active-class="animated slideInRight" appear>
          <div class="outer-text" style="margin-top: 1rem;" v-show="show">
            <p class="xs">数据来源：院财务报账决策系统</p>
            <p class="xs">背景演唱：李扬《儿时》</p>
            <p class="xs">数据仅供参考</p>
            <p class="l" style="margin-bottom: 0.4rem;color:#C44655">{{personInfo.userName}}，水科院因你而精彩</p>
            <!-- <span class="btn" @click="$router.replace({path:'/'})">生成我的大事记</span> -->
          </div>
        </transition>
      </div>
    </transition>
    </swiper-slide>
    <!-- <div class="swiper-pagination" slot="pagination"></div> -->
  </swiper>
</div>
</template>

<script>
  import flymap from './map/flymap'
  import linemap from './map/line'
  import flymapp from './map/flymapp'
  export default {
    components: {
      flymap,
      linemap,
      flymapp
    },
    data() {
      return {
        isEmpty: false,
        curIndex: true,
        nextIndex: false,
        show: true,
        lineData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        oneline: {
          name: '一',
          value: 0
        },
        strInfo: '',
        pInfo:'',
        isplay: true,
        baseInfo: [
          [],
          [],
          [],
          [],
          [],
          [],
          [],
          [],
          [],
          [],
          [],
          [],
          []
        ],
        personInfo: {},
        rankArr: ['初涉江湖', '武林新贵', '江湖少侠', '威名远扬', '四方游侠', '仗剑天涯', '名震江湖','笑傲江湖','雄霸天下'],
        myPlugin: {
          on: {
            slideChange: function() {
              console.log('slideChange', this.previousIndex, '->', this.activeIndex, this)
            }
          },
        },
        swiperOption: {
          direction: 'vertical',
          slidesPerView: 1,
          mousewheel: true,
          debugger: true,
        }
      }
    },
    methods: {
      addDate(date, days) {
        if (days == undefined || days == '') {
          days = 1;
        }
        var date = new Date(date);
        date.setDate(date.getDate() + days);
        var month = date.getMonth() + 1; //月份从0开始所以需要+1
        var day = date.getDate();
        return date.getFullYear() + '.' + getFormatDate(month) + '.' + getFormatDate(day);
      },
      ftime(time) {
        if (time) {
          let date = time.split('-')
          return date[1] + '.' + date[2]
        } else {
          return ''
        }
      },
      toInt(num) {
        if (num) {
          return parseInt(num)
        } else {
          return 0
        }
      },
      getDate() {
        this.$axios('restful/big/event/diffTravel?randomSignature=' + this.$route.params.id)
          .then(res => {
            if (res.data.code == 1) {
              this.baseInfo = res.data.object
              this.isEmpty = this.baseInfo[0].id ? false : true
            } else {
              alert(res.data.message)
            }
          })
      },
      getBaseInfo() {
        this.$axios('restful/big/event/base/info?randomSignature=' + this.$route.params.id)
          .then(res => {
            if (res.data.code == 1) {
              let obj = res.data.object;
              this.personInfo = obj;
              
              let lineArr = [{
                name: '一',
                value: obj.janNum
              }, {
                name: '二',
                value: obj.febNum
              }, {
                name: '三',
                value: obj.marNum
              }, {
                name: '四',
                value: obj.aprNum
              }, {
                name: '五',
                value: obj.mayNum
              }, {
                name: '六',
                value: obj.junNum
              }, {
                name: '七',
                value: obj.julNum
              }, {
                name: '八',
                value: obj.augNum
              }, {
                name: '九',
                value: obj.septNum
              }, {
                name: '十',
                value: obj.octNum
              }, {
                name: '十一',
                value: obj.novNum
              }, {
                name: '十二',
                value: obj.decNum
              }, ]
              this.lineData = [obj.janNum, obj.febNum, obj.marNum, obj.aprNum, obj.mayNum, obj.junNum, obj.julNum, obj.augNum, obj.septNum, obj.octNum, obj.novNum, obj.decNum];
              let delData = lineArr.sort((a, b) => {
                return b.value - a.value
              })[0]
              console.log(delData)
              this.oneline = {
                name: delData.name,
                value: delData.value
              }
              setTimeout(()=>{
                document.title = '2019出差大事记，' + obj.userName + '的称号是' + this.rankArr[this.personInfo.level - 1]
              },1000)
              
            } else {
              alert(res.data.message)
            }
          })
      },
    },
    watch: {
      isplay(n, o) {
        let music = this.$refs.music;
        if (n) {
          music.play()
        } else {
          music.pause()
        }
      }
    },
    created() {
      var _this = this;
      this.$VueAwesomeSwiper.Swiper.use({
        on: {
          slideChange: function() {
            console.log('slideChange', this.previousIndex, '->', this.activeIndex)
            // _this.show = this.activeIndex;
            _this.show = false;
            setTimeout(() => {
              _this.show = true;
            }, 100)
          }
        },
      })
      this.getDate()
      this.getBaseInfo()
    }
  }
</script>

<style>
  .text {
    line-height: 2.2rem;
    text-align: left;
    color: #fff;
    /* font-weight: 600; */
  }
  .mini_text {
    line-height: 1.8rem;
    font-size: 1rem;
    text-align: center;
    color: #f6f6f6;
    margin-top: 9rem;
  }
  .mini_text span {
    font-weight: 600;
  }
  .black-text {
    color: #2a2a2a;
  }
  .round {
    color: #fff;
    background-color: #F73B3B;
    display: inline-block;
    height: 5rem;
    width: 5rem;
    text-align: center;
    line-height: 5rem;
    border-radius: 50%;
    font-size: 1.7rem;
    margin: 0 0.4rem;
  }
  .cell {
    width: 100%;
    display: block;
    padding: 1rem;
  }
  .red {
    color: #F73B3B;
    font-weight: 600;
  }
  .map {
    height: 300px;
    width: 100%;
  }
  .swiper-box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .swiper-item {
    height: 100%;
    text-align: center;
    font-size: 1.4rem;
    /* background-color: #EDD9B0; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-image: url('../assets/bg.jpg');
    color: #2a2a2a;
  }
  .up-img {
    width: 2rem;
  }
  .up {
    position: absolute;
    padding: 0.2rem;
    bottom: 0;
    right: 0;
  }
  .pos_r {
    position: absolute;
  }
  .center {
    text-align: center;
  }
  .fly {
    width: 20rem;
    right: 0;
    top: 8rem;
  }
  .person {
    width: 16rem;
    left: 0rem;
    top: 22rem;
  }
  .mini_font {
    font-size: 0.8rem;
    line-height: 1.4rem;
  }
  .border {
    background-image: url('../assets/border.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 24rem;
    height: 30rem;
    margin: 0 auto;
    display: block;
    margin-top: 1rem;
    /* position: absolute; */
    /* top: 6rem;
          left: 50%;
          transform: translate(-50%, 0); */
    padding: 1.2rem 3rem;
  }
  .year {
    font-size: 3rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-left: 1.6rem;
    text-align: left;
    width: 5rem;
    position: relative;
    display: inline-block;
  }
  .year> :nth-child(1) {
    color: #C44655;
    font-size: 3.6rem;
  }
  .year> :nth-child(2) {
    background-color: #2a2a2a;
    height: 0.1rem;
    width: 3.4rem;
    transform: rotate(-7deg);
    margin-top: 0.2rem;
  }
  .year> :nth-child(3) {
    color: #3D85AD;
    font-size: 2.8rem;
    margin-left: 1.8rem;
    margin-top: 0rem;
  }
  .t_l {
    text-align: left;
  }
  .title {
    position: absolute;
    top: 2.3rem;
    left: 9rem;
    font-weight: 600;
    font-size: 2.2rem;
  }
  .title>p {
    font-size: 1rem;
    font-weight: normal;
    color: #999;
    margin-top: 1rem;
  }
  .title>p>span {
    color: #C44655;
    font-weight: 600;
  }
  .border-inner {
    background-color: #C44655;
    background-image: url('../assets/bottom.png');
    height: 20rem;
    padding: 0.14rem;
    position: relative;
  }
  .border-inner img {
    margin-top: 6.4rem;
  }
  .map-img {
    margin-top: 6.4rem;
    width: 100%;
  }
  .inner-text {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.1rem;
    color: #f6f6f6;
    line-height: 2rem;
    text-align: center;
    width: 100%;
  }
  .inner-text .i {
    color: #2a2a2a;
  }
  .outer-text {
    color: #2a2a2a;
    font-size: 1.4rem;
    text-align: center;
    line-height: 2rem;
  }
  .i {
    font-weight: 600;
    font-size: 1.6rem;
  }
  .xxl {
    font-size: 2rem;
    line-height: 2.6rem;
  }
  .xl {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .l {
    font-size: 1.4rem;
  }
  .s {
    font-size: 1.2rem;
  }
  .ss {
    font-size: 1rem;
  }
  .xs {
    font-size: 0.8rem;
    line-height: 1.2rem;
  }
  .b {
    font-weight: 600;
  }
  .inner-text .fuhao {
    font-weight: 6rem;
    font-weight: 600;
  }
  .btn {
    font-weight: 600;
    color: #f6f6f6;
    background-color: #3D85AD;
    display: inline-block;
    line-height: 2.4rem;
    padding: 0 0.8rem;
    box-shadow: 0.2rem 0.2rem 0.1rem 0.1rem #C44655;
    border-radius: 0.4rem;
  }
  .audio {
    opacity: 0;
  }
  .icon {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    width: 1.6rem;
    border-radius: 50%;
    border: solid 2px #fff;
  }
  .play {
    -webkit-animation: haha 1.6s linear infinite;
  }
  .pic_img{
    position: absolute;
    bottom: 10px;
    left: 0;
    text-align: center;
    width: 100%;
    color: #f6f6f6;
  }
  @-webkit-keyframes haha {
    0% {
      -webkit-transform: rotate(0deg);
    }
    25% {
      -webkit-transform: rotate(90deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
    }
    75% {
      -webkit-transform: rotate(270deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @media only screen and (max-height: 560px) {
    .title {
      top: 1.6rem;
    }
    .t_l .year {
      margin-left: 2.8rem;
      margin-top: 0.6rem;
    }
    .t_l .year> :nth-child(1) {
      font-size: 3rem;
    }
    .t_l .year> :nth-child(2) {
      width: 3rem;
    }
    .t_l .year> :nth-child(3) {
      font-size: 2rem;
      margin-left: 1.8rem;
      margin-top: 0rem;
    }
  }
  @media only screen and (max-height: 540px) {
    .t_l .year {
      display: none;
    }
    .title {
      position: relative;
      top: 0.6rem;
      left: 1.4rem;
      font-size: 1.2rem;
    }
    .title>p {
      font-size: 0.8rem;
      margin-top: 0rem;
    }
    .border {
      bottom: 1.8rem;
    }
  }
  @media only screen and (max-height: 470px) {
    html {
      font-size: 13px !important;
    }
    .title {
      position: relative;
      top: 0.6rem;
      left: 2.2rem;
      font-size: 1.2rem;
    }
  }
</style>